// /consts.js
import blockBasic from 'grapesjs-blocks-basic'
import flexBox from 'grapesjs-blocks-flexbox'
import codeEditor from 'grapesjs-component-code-editor'
import countdown from 'grapesjs-component-countdown'
import customCode from 'grapesjs-custom-code'
import navbar from 'grapesjs-navbar'
import postcss from 'grapesjs-parser-postcss'
import exportZip from 'grapesjs-plugin-export'
import forms from 'grapesjs-plugin-forms'
import presetPage from 'grapesjs-preset-webpage'
import rte from 'grapesjs-rte-extensions'
import rulers from 'grapesjs-rulers'
import editor from 'grapesjs-script-editor'
import bg from 'grapesjs-style-bg'
import filter from 'grapesjs-style-filter'
import gradient from 'grapesjs-style-gradient'
import tabs from 'grapesjs-tabs'
import tooltip from 'grapesjs-tooltip'
import touch from 'grapesjs-touch'
import imgEditor from 'grapesjs-tui-image-editor'
import typed from 'grapesjs-typed'
import templates from 'grapesjs-templates'
import zoom from 'grapesjs-zoom-plugin'
// import * as blocky from 'grapesjs-blockly'
import charts from 'grapesjs-chartjs-plugin'

let lp = '/img/';
let plp = 'https://via.placeholder.com/350x250/';
let images = [
    lp + 'team1.jpg',
    lp + 'team2.jpg',
    lp + 'team3.jpg',
    plp + '78c5d6/fff',
    plp + '459ba8/fff',
    plp + '79c267/fff',
    plp + 'c5d647/fff',
    plp + 'f28c33/fff',
    plp + 'e868a2/fff',
    plp + 'cc4360/fff',
    lp + 'work-desk.jpg',
    lp + 'phone-app.png',
    lp + 'bg-gr-v.png'
];

export const gjsConfig = {
    height: '100vh',
    container: '#gjs',
    fromElement: true,
    showOffsets: true,
    // storageManager: false,
    assetManager: {
        embedAsBase64: true,
        assets: images
    },
    layerManager: {
        // appendTo: '#layers-container'
    },
    blockManager: {
        // appendTo: '#blocks'
    },
    selectorManager: {
        componentFirst: true,
        // appendTo: '#selectors-container',
    },
    traitManager: {
        // appendTo: '#traits-container',
    },
    styleManager: {
        // appendTo: '#style-manager-container',
        sectors: [
            {
                name: 'General',
                properties: [
                    {
                        extend: 'float',
                        type: 'radio',
                        default: 'none',
                        options: [
                            {value: 'none', className: 'fa fa-times'},
                            {value: 'left', className: 'fa fa-align-left'},
                            {value: 'right', className: 'fa fa-align-right'}
                        ],
                    },
                    'display',
                    {extend: 'position', type: 'select'},
                    'top',
                    'right',
                    'left',
                    'bottom',
                ],
            },
            {
                name: 'Dimension',
                open: false,
                properties: [
                    'width',
                    {
                        id: 'flex-width',
                        type: 'integer',
                        name: 'Width',
                        units: ['px', '%'],
                        property: 'flex-basis',
                        toRequire: 1,
                    },
                    'height',
                    'max-width',
                    'min-height',
                    'margin',
                    'padding'
                ],
            },
            {
                name: 'Typography',
                open: false,
                properties: [
                    'font-family',
                    'font-size',
                    'font-weight',
                    'letter-spacing',
                    'color',
                    'line-height',
                    {
                        extend: 'text-align',
                        options: [
                            {id: 'left', label: 'Left', className: 'fa fa-align-left'},
                            {id: 'center', label: 'Center', className: 'fa fa-align-center'},
                            {id: 'right', label: 'Right', className: 'fa fa-align-right'},
                            {id: 'justify', label: 'Justify', className: 'fa fa-align-justify'}
                        ],
                    },
                    {
                        property: 'text-decoration',
                        type: 'radio',
                        default: 'none',
                        options: [
                            {id: 'none', label: 'None', className: 'fa fa-times'},
                            {id: 'underline', label: 'underline', className: 'fa fa-underline'},
                            {id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough'}
                        ],
                    },
                    'text-shadow'
                ],
            },
            {
                name: 'Decorations',
                open: false,
                properties: [
                    'opacity',
                    'border-radius',
                    'border',
                    'box-shadow',
                    'background', // { id: 'background-bg', property: 'background', type: 'bg' }
                ],
            },
            {
                name: 'Extra',
                open: false,
                buildProps: [
                    'transition',
                    'perspective',
                    'transform'
                ],
                properties: [
                    {extend: 'filter'},
                    {extend: 'filter', property: 'backdrop-filter'},
                ],
            },
            {
                name: 'Flex',
                open: false,
                properties: [{
                    name: 'Flex Container',
                    property: 'display',
                    type: 'select',
                    defaults: 'block',
                    list: [
                        {value: 'block', name: 'Disable'},
                        {value: 'flex', name: 'Enable'}
                    ],
                }, {
                    name: 'Flex Parent',
                    property: 'label-parent-flex',
                    type: 'integer',
                }, {
                    name: 'Direction',
                    property: 'flex-direction',
                    type: 'radio',
                    defaults: 'row',
                    list: [{
                        value: 'row',
                        name: 'Row',
                        className: 'icons-flex icon-dir-row',
                        title: 'Row',
                    }, {
                        value: 'row-reverse',
                        name: 'Row reverse',
                        className: 'icons-flex icon-dir-row-rev',
                        title: 'Row reverse',
                    }, {
                        value: 'column',
                        name: 'Column',
                        title: 'Column',
                        className: 'icons-flex icon-dir-col',
                    }, {
                        value: 'column-reverse',
                        name: 'Column reverse',
                        title: 'Column reverse',
                        className: 'icons-flex icon-dir-col-rev',
                    }],
                }, {
                    name: 'Justify',
                    property: 'justify-content',
                    type: 'radio',
                    defaults: 'flex-start',
                    list: [{
                        value: 'flex-start',
                        className: 'icons-flex icon-just-start',
                        title: 'Start',
                    }, {
                        value: 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-just-end',
                    }, {
                        value: 'space-between',
                        title: 'Space between',
                        className: 'icons-flex icon-just-sp-bet',
                    }, {
                        value: 'space-around',
                        title: 'Space around',
                        className: 'icons-flex icon-just-sp-ar',
                    }, {
                        value: 'center',
                        title: 'Center',
                        className: 'icons-flex icon-just-sp-cent',
                    }],
                }, {
                    name: 'Align',
                    property: 'align-items',
                    type: 'radio',
                    defaults: 'center',
                    list: [{
                        value: 'flex-start',
                        title: 'Start',
                        className: 'icons-flex icon-al-start',
                    }, {
                        value: 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-al-end',
                    }, {
                        value: 'stretch',
                        title: 'Stretch',
                        className: 'icons-flex icon-al-str',
                    }, {
                        value: 'center',
                        title: 'Center',
                        className: 'icons-flex icon-al-center',
                    }],
                }, {
                    name: 'Flex Children',
                    property: 'label-parent-flex',
                    type: 'integer',
                }, {
                    name: 'Order',
                    property: 'order',
                    type: 'integer',
                    defaults: 0,
                    min: 0
                }, {
                    name: 'Flex',
                    property: 'flex',
                    type: 'composite',
                    properties: [{
                        name: 'Grow',
                        property: 'flex-grow',
                        type: 'integer',
                        defaults: 0,
                        min: 0
                    }, {
                        name: 'Shrink',
                        property: 'flex-shrink',
                        type: 'integer',
                        defaults: 0,
                        min: 0
                    }, {
                        name: 'Basis',
                        property: 'flex-basis',
                        type: 'integer',
                        units: ['px', '%', ''],
                        unit: '',
                        defaults: 'auto',
                    }],
                }, {
                    name: 'Align',
                    property: 'align-self',
                    type: 'radio',
                    defaults: 'auto',
                    list: [{
                        value: 'auto',
                        name: 'Auto',
                    }, {
                        value: 'flex-start',
                        title: 'Start',
                        className: 'icons-flex icon-al-start',
                    }, {
                        value: 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-al-end',
                    }, {
                        value: 'stretch',
                        title: 'Stretch',
                        className: 'icons-flex icon-al-str',
                    }, {
                        value: 'center',
                        title: 'Center',
                        className: 'icons-flex icon-al-center',
                    }],
                }]
            },
        ],
    },
    panels: {
        defaults: [
            {
                id: 'layers',
                el: '#layers',
                resizable: {
                    tc: 0,
                    cr: 1,
                    bc: 0,
                    keyWidth: 'flex-basis',
                },
            },
            {
                id: 'styles',
                el: '#style-manager',
                resizable: {
                    tc: 0,
                    cr: 0,
                    cl: 1,
                    bc: 0,
                    keyWidth: 'flex-basis',
                },
            },
            {
                buttons: [
                    //...
                    {
                        attributes: {title: 'Open Code'},
                        className: 'fa fa-code',
                        command: 'open-code',
                        id: 'open-code'
                    }
                    //...
                ],
                id: 'views'
            }
        ]
    },
    plugins: [
        blockBasic,
        flexBox,
        codeEditor,
        countdown,
        customCode,
        navbar,
        postcss,
        exportZip,
        forms,
        presetPage,
        rte,
        rulers,
        editor,
        bg,
        filter,
        gradient,
        tabs,
        tooltip,
        touch,
        imgEditor,
        typed,
        templates,
        zoom,
        // blocky,
        charts
    ],
    pluginsOpts: {
        blockBasic: {flexGrid: true},
        imgEditor: {
            script: [
                // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
                'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
            ],
            style: [
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
            ],
        },
        tabs: {
            tabsBlock: {category: 'Extra'}
        },
        typed: {
            block: {
                category: 'Extra',
                content: {
                    type: 'typed',
                    'type-speed': 40,
                    strings: [
                        'Text row one',
                        'Text row two',
                        'Text row three',
                    ],
                }
            }
        },
        // 'grapesjs-preset-webpage': {
        //     modalImportTitle: 'Import Template',
        //     modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
        //     modalImportContent: function (editor) {
        //         return editor.getHtml() + '<style>' + editor.getCss() + '</style>'
        //     },
        // },
        exportZip: {},
        navbar: {/* ...options */},
        gradient: {},
        flexBox: {},
    },
}

